<!-- 路由器,linux,pc质押 -->
<template>

  <div class="pag" >
    <div class="pledge-main">
      <cube-sticky :pos="scrollY">
        <cube-scroll :options="options" @pulling-up="onPullup" ref="scroll"
                     :scroll-events="['scroll']"
                     @scroll="scrollY = -$event.y">
          <div class="pledge-banner" :class="{'router-pledge': type == 'router',
                                          'linux-pledge': type == 'linux',
                                          'pc-pledge': type == 'pc'}">
            <h3>{{ typeNames[type] }}挖矿令牌质押</h3>
            <div class="pledge-banner-content">
              <div>绑定的<i style="color:#FF1140;">{{ nodeNum }}</i>个节点中</div>
              <div>共<i style="color:#E1EE10;">{{ nodePledgeNum }}</i>个节点质押了令牌</div>
            </div>
          </div>
          <div class="token-types">
            <img src="~assets/images/token/token-x.png" alt="">
            自有闲置令牌：{{ tokenInfo.num.idleNum }}
            <span></span>
            <div style="display: flex;align-items: center" :style="{opacity: (tokenInfo.rentNum.idleNum + tokenInfo.rentNum.miningNum) ? 1 : 0}">
              <img src="~assets/images/token/token-z.png" alt="">
              租借闲置令牌：{{ tokenInfo.rentNum.idleNum }}
            </div>
          </div>
          <router-fregment></router-fregment>
        </cube-scroll>
      </cube-sticky>
    </div>
  </div>

</template>



<script>
    import { getTokenNodeList, pledgeToken } from 'api'
    import alert from 'cpnts/alert.vue'
    import listEmpty from 'cpnts/list-empty.vue'
    import routerFregment from './routerFregment.vue'

    export default {
        components: {
            'alert': alert,
            'listEmpty': listEmpty,
            'routerFregment': routerFregment,
        },
        data() {
            return {
                curTab: 1,
                isDoActioning: false,
                isTokenActionTransaction: false,
                curTokenData: null,
                useBorrow: false,
                //emptyNode: 18,
                tip4: '',
                curTip: 3,
                showChooseTokenPopup: true,
                scrollY: 0,
                typeNames: {
                    router: '路由器',
                    linux: 'Linux',
                    pc: '客户端',
                },
                typeValues: {
                    router: 3,
                    linux: 2,
                    pc: 1,
                },
                type: 'router',
                options: {
                    pullUpLoad: true
                },
                typeObj: {
                    "1": ["pledge-item-action"],
                    "2": ["revoke-item-action"],
                    "3": ["revoke-item-action"]
                },
                statusObj: {
                    "2": ["token-x"],
                    "3": ["token-z"],
                    "1": ["token-k"],
                },
                list: null
            }
        },
        beforeRouteEnter (to, from, next) {
            next((vm) => {
                //vm.resetData()
                vm.type = to.query.type
                vm.getData()
            })
        },
        watch: {
            isDoActioning(val){
                if(val){
                    this.$loading('处理中..')
                }else{
                    this.$loadingHide()
                }
            }
        },
        computed: {
            todayNode(){
                let {nodeNum, nodePledgeNum} = this
                return  nodeNum - nodePledgeNum
            },
            isShowTip3(){
                let {nodeNum, nodePledgeNum, tokenInfo} = this
                let {todayCanPledgeNum} = tokenInfo
                return todayCanPledgeNum > 0 && (nodeNum - nodePledgeNum) > 0
            },
            isShowTip2(){
                let {num, todayCanPledgeNum} = this.tokenInfo
                return todayCanPledgeNum == 0 && num.idleNum > 0
            },
            hasBorrow(){
                let {miningNum, idleNum} = this.tokenInfo.rentNum
                return idleNum > 0
            },
            idleNum(){
                let {rentNum, num} = this.tokenInfo
                return rentNum.idleNum + num.idleNum
            },
            nodeNum(){
                let {type, tokenInfo} = this
                return tokenInfo[type].nodeNum
            },
            nodePledgeNum(){
                let {type, tokenInfo} = this
                return tokenInfo[type].nodePledgeNum
            },
            tokenInfo(){
                return  this.$store.state.tokenInfo
            },
            tipContent(){

            }
        },
        mounted(){
            //this.$refs.tokenPopup.show()
        },
        methods: {
            resetData(){
                this.hideTipPopup()
                this.hideTokenPopup()
                this.list = null
                this.isTokenActionTransaction = false
                this.isDoActioning = false
                this.useBorrow = false
                this.scrollY= 0
            },
            tokenPopupMaskClick(){
                this.isTokenActionTransaction = false
            },
            tokenPledgeAllHandle(action){
                this.tokenPledgeHandle({
                    action,
                    //item: null,
                    params: {
                        tokenType: 0,
                        nodeId: 0
                    }
                })
            },
            tokenPledgeItemHandle(item){
                let {status, node_id, tokenType} = item
                let action = status == 1 ? 'pledge' : 'revoke'
                if(action == 'pledge' && this.tokenInfo.todayCanPledgeNum == 0){
                    this.curTip = 1
                    this.showTipPopup()
                    return
                }
                this.tokenPledgeHandle({
                    action,
                    item,
                    params: {
                        tokenType: status == 2 ? 1 : 0,
                        nodeId: node_id
                    }
                })
            },
            tokenPledgeHandle(data){
                let {item, params, action} = data
                if(!this.idleNum && action == 'pledge'){
                    return this.$warn('没有可质押的令牌')
                }
                if(this.isTokenActionTransaction){
                    return
                }
                this.isTokenActionTransaction = true
                //debugger
                if(action == 'pledge'){
                    if(item){
                        //质押单个
                        if(this.hasBorrow){
                            if(this.useBorrow){
                                params.tokenType = 0
                                this.pledgeRevokeTokenAction(data)
                            }else{
                                this.curTokenData = data
                                this.showTokenPopup()
                            }
                        }else {
                            params.tokenType = 1
                            this.pledgeRevokeTokenAction(data)
                        }
                    }else{
                        //质押所有
                        this.pledgeRevokeTokenAction(data)
                    }
                } else {
                    //撤销质押
                    this.pledgeRevokeTokenAction(data)
                }
            },
            async pledgeRevokeTokenAction({item, params, action}){
                let source = action == 'pledge' ? 0 : 1
                this.isDoActioning = true
                try {
                    let payload = Object.assign(
                        {
                            type: this.typeValues[this.type],
                            source
                        }, params)
                    //debugger
                    let {data} = await pledgeToken(payload)
                    if(item){
                        item.status = action == 'pledge' ?  (params.tokenType ? 2 : 3  ) : 1
                    }
                    //this.isTokenActionTransaction = false
                    // this.$store.dispatch('getTokenInfo').then(()=>{
                    //     this.pledgeActionResultTip(action, item)
                    // })
                }catch (e) {
                    //this.$warn(e.info || '操作超时')
                    this.curTip = 4
                    this.tip4 = e.info || '操作超时'
                    this.showTipPopup()
                }
                if(!item){
                    this.getData()
                }
                this.isDoActioning = false
                this.isTokenActionTransaction = false
                this.$store.dispatch('getTokenInfo')
            },
            pledgeActionResultTip(action, item){
                if(action == 'pledge' && !item){
                    this.$once('pledgeActionResult', ()=>{
                        let {isShowTip2, isShowTip3} = this
                        if(isShowTip2){
                            this.curTip = 2
                            this.showTipPopup()
                        }else if(isShowTip3){
                            this.curTip = 3
                            this.showTipPopup()
                        }
                    })
                }
            },
            tokenTypeChoose(tokenType){
                this.hideTokenPopup()
                this.curTokenData.params.tokenType = tokenType
                this.pledgeRevokeTokenAction(this.curTokenData)
            },
            hideTipPopup(){
                this.$refs.tipPopup.hide()
            },
            showTipPopup(){
                this.$refs.tipPopup.show()
            },
            showTokenPopup(){
                this.$refs.tokenPopup.show()
            },
            hideTokenPopup(){
                this.$refs.tokenPopup.hide()
            },
            scrollHandler({ y }) {
                this.scrollY = -y
            },
            getPledgeStatus(status){

            },
            async onPullup(){
                let me = this
                let sc = this.$refs.scroll
                if(this.list.length < 20){
                    return this.getData()
                }
                let pagec = Math.floor((this.list.length - 20) / 20) + 1
                let pagey = (this.list.length - 20) % 20

                try {
                    let {data} =  await getTokenNodeList(
                        {
                            type: this.typeValues[this.type],
                            per: 20,
                            page: 1 + pagec
                        }
                    )
                    if(!data){
                        sc.forceUpdate()
                        return
                    }
                    if(pagey){
                        data.splice(0, pagey)
                    }
                    me.list = me.list.concat(data)
                    if(!data.length){
                        sc.forceUpdate()
                    }else{
                        this.$nextTick(()=>{
                            sc.forceUpdate(true)
                        })
                    }
                } catch (e) {
                    this.$warn(e.info)
                    sc.forceUpdate()
                }


            },
            async getData(){
                let sc = this.$refs.scroll
                try {
                    let {data} = await getTokenNodeList({
                        type: this.typeValues[this.type],
                        per: 20,
                        page: 1
                    })
                    if(!data){
                        this.list = []
                        sc.forceUpdate()
                        return
                    }
                    this.list = data
                    this.$nextTick(()=>{
                        sc.forceUpdate(true)
                    })
                }catch (e) {
                    this.$warn(e.info)
                    sc.forceUpdate()
                }

            }
        }
    }
</script>





<style lang="scss" scoped>

  .pag {
    background: #F5F5FB;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .pledge-main {
    flex: 1;
    overflow: hidden;
  }

  .pledge-banner {
    //width:690px;
    height:266px;
    border-radius:14px 14px 0px 0px;
    margin: 34px 30px 0 30px;
    padding-top: 56px;
    h3 {
      padding-right: 68px;
      font-size:40px;
      font-weight:600;
      color:rgba(255,255,255,1);
      text-shadow:0px 2px 4px rgba(0,89,240,0.5);
      margin-bottom: 16px;
      text-align: right;
    }
  }

  .pledge-banner-content {
    width:360px;
    height:100px;
    background:rgba(255,255,255,.2);
    border-radius:10px;
    margin-right: 64px;
    margin-left: auto;
    text-align: center;
    padding-top: 16px;
    font-size: 26px;
    color: #fff;
    div {
      margin-bottom: 16px;
      i {
        padding: 0 5px;
        font-style: normal;
      }
    }
  }



  .router-pledge {
    background: url("~assets/images/token/router.png") 24px center / 174px 174px no-repeat,
    linear-gradient(210deg,rgba(73,189,250,1) 0%,rgba(43,117,243,1) 100%);
  }


  .linux-pledge {
    background: url("~assets/images/token/linux.png") 24px center / 174px 174px no-repeat,
    linear-gradient(210deg,rgba(171,133,254,1) 0%,rgba(121,94,255,1) 100%);
  }


  .pc-pledge {
    background: url("~assets/images/token/pc.png") 24px center / 174px 174px no-repeat,
    linear-gradient(210deg,rgba(49,236,203,1) 0%,rgba(37,189,255,1) 100%);
  }



  .token-types {
    height: 104px;
    background: #fff;
    font-size:30px;
    color:rgba(29,40,88,1);
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 58px;
      height: 58px;
      margin-right: 12px;
    }
    span {
      margin-right: 38px;
    }
  }

  .tips {
    font-size:26px;
    color:rgba(113,118,140,1);
    display: flex;
    align-items: center;
    justify-content: center;
    //height: 80px;
    margin: 28px 0;
    i {
      color: #00A989;
      padding: 0 5px;
      font-style: normal;
    }
    &:before {
      margin-right: 13px;
      flex: 1;
      content: '';
      height:2px;
      background:rgba(205,207,217,1);
      display: inline-block;
    }
    &:after {
      margin-left: 13px;
      flex: 1;
      content: '';
      height:2px;
      background:rgba(205,207,217,1);
      display: inline-block;
    }
  }

  .device-pledge-list {
    margin-top: 28px;
  }

  .pledge-actions {
    padding: 30px 0 45px 0;
    display: flex;
    justify-content: center;
    div {
      width:330px;
      height:84px;
      background:rgba(23,62,143,1);
      border-radius:10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size:32px;
      color:rgba(255,255,255,1);
      margin-right: 30px;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }


  .m-table {
    height: 100%;
    color: #202C5B;
  }

  .m-table-head {
    //height: 88px;
    .m-table-row {
      height: 72px;
      .m-table-cell{
        &:nth-of-type(2) {
          padding-left: 86px;
        }
      }
    }
  }

  .m-table-body {
    height: calc(100% - 88px);
  }

  .m-table-row {
    display: flex;
    align-items: center;
    //margin-top: 8px;
    background: #fff;
    height: 96px;
    padding: 0 30px;
    border-top: 2px solid #F5F5F5;
  }

  .m-table-cell{
    display: flex;
    align-items: center;
    &:nth-of-type(1) {
      max-width: 11%;
      width: 11%;
      justify-content: start;
    }
    &:nth-of-type(2) {
      max-width: 38%;
      width: 38%;
      //overflow: hidden;
      //justify-content: start;
      align-items: flex-start;
      flex-wrap: wrap;
      flex-direction: column;
    }
    &:nth-of-type(3) {
      max-width: 30%;
      width: 30%;
      justify-content: center;
    }
    &:nth-of-type(4) {
      max-width: 22%;
      width: 22%;
      justify-content: flex-end;
    }
  }


  .token-icon {
    width: 88px;
    background: center center / contain no-repeat;
  }

  .token-x {
    height: 60px;
    background-image: url("~assets/images/token/token-x2.png");
  }

  .token-z {
    height: 60px;
    background-image: url("~assets/images/token/token-z2.png");
  }

  .token-k {
    height: 16px;
    background-image: url("~assets/images/token/token-k.png");
  }

  .token-action {
    width:150px;
    height:60px;
    border:2px solid;
    border-radius:8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:26px;
  }

  .pledge-item-action {
    border-color: #00A989;
    color: #00A989;
    &:before {
      content: '质押令牌';
      display: inline;
    }
  }

  .revoke-item-action {
    border-color: #DC0630;
    color: #DC0630;
    &:before {
      content: '撤销令牌';
      display: inline;
    }
  }

  .tipPopup-p {
    padding: 0 30px;
  }



</style>

<style lang="scss" scoped>

  .select-token {
    font-size:26px;
    color:rgba(32,44,91,1);
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .use-tokens {
    display: flex;
    height: 100%;
    div {
      flex: 1;
      border-right: 2px solid #D0D4E4;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .f-checkbox {
    width: 34px;
    height: 34px;
    margin-right: 24px;
    border-radius: 50%;
    -webkit-appearance: none;
    appearance: none;
    background: url("~assets/images/token/uncheck.png") center center/contain no-repeat;
    &:before {
      content: '';
      width: 0;
      height: 0;
      background-image: url("~assets/images/token/check.png");
    }
    &:checked {
      background-image: url("~assets/images/token/check.png");
    }
  }

  .empty-list {
    img {
      display: block;
      height: 274px;
      width: 250px;
      margin: 175px auto 84px auto;
    }
    p {
      font-size:36px;
      font-weight:600;
      color:rgba(113,118,140,1);
      text-align: center;
      margin-bottom: 35px;
    }
    div {
      text-align: center;
      font-size:26px;
      color:rgba(113,118,140,1);
    }
  }


  .tag {
    min-width: 73px;
    width:73px;
    height:30px;
    border-radius:4px;
    font-size:20px;
    //font-weight:500;
    color:rgba(255,255,255,1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    margin-top: 8px;
    //margin-bottom: 8px;
    &.warning {
      background:rgba(247,163,16,1);
    }
    &.success {
      background:#10D592;
    }
    &.danger {
      background:#EB3257;
    }
    &.info {
      background:#697a9b;
    }
  }



</style>


